<template>
  <div>
    <div class="flex items-center gap-8 mb-10">
      <span>组件路径:</span>
      <a-switch
        :checkedChildren="'手动'"
        :un-checked-children="'自动'"
        v-model:checked="forceAdd"
      ></a-switch>
    </div>
    <a-form-item name="component">
      <div v-if="forceAdd">
        <a-input
          allow-clear
          v-model:value="menuForm.component"
          placeholder="请输入组件路径"
        ></a-input>
        <div class="text-nowrap">
          <div class="text-gray-500 text-[12px]">完整路径</div>
          <div>src/views/modules/{{ menuForm.component || 'index' }}.vue</div>
        </div>
      </div>
      <div v-else>
        <a-alert message="建议使用代码生成,将会自动创建菜单" type="warning"></a-alert>
      </div>
    </a-form-item>
    <a-form-item label="选择图标" name="icon">
      <Gallery type="image-icon" v-model="menuForm.icon">
        <div class="icon flex flex-s">
          <a-image
            v-if="menuForm.icon"
            :src="getSystemIcon(menuForm.icon!)"
            :preview="false"
            :width="32"
          ></a-image>
          <SmileOutlined v-else />
        </div>
      </Gallery>
    </a-form-item>
  </div>
</template>

<script setup lang="ts">
import { getSystemIcon } from '@/api/utils/image';
import Gallery from '@/views/selector/gallery/Gallery.vue';
import { menuForm } from '../data/form';

const forceAdd = ref(false);
</script>

<style lang="scss" scoped>
.icon {
  border: 1px solid var(--border-color);
  padding: 12px;
  border-radius: var(--radius);
  min-width: 42px;
}
.text-nowrap {
  white-space: nowrap !important;
}
</style>
